<template>
	<view class="page_box   ">
		<u-navbar :is-back="true" title="我的钱包" v-if="1" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>

		<view class="content_box ">
			<view class="head-bg ww100 h458 bg-img pl70 pr70 flex align-end ">
				<view class="flex justify-between ww100">
					<view class="flex flex-direction">
						<text class="f28 text-white">佣金（单位：元）</text>
						<text class="f60 text-bold text-white lh mt40 mb88 ">{{ data.balance }}</text>
					</view>
					<view class="w120 h60 round bg-white flex align-center justify-center" @click="l.to('/pages/my/withdraw')">
						<text class="f28 " style="color: #F2736D;">提现</text>
					</view>
				</view>
			</view>
			<view class="info ww100  padding-lr pt60">
				<view class="u-relative"><text class="f32 text-bold text-black tred">明细</text></view>

				<!-- <scroll-view scroll-y="true" > -->
				<z-paging
					style="height: 65vh;"
					ref="paging"
					v-model="dataList"
					@query="queryList"
					use-page-scroll
					:default-page-size="5"
					loading-more-no-more-text="我也是有底线的！"
					:show-refresher-update-time="true"
					:refresher-update-time-key="1"
					
				>
					<custom-refresher slot="refresher" slot-scope="{ refresherStatus }" :status="refresherStatus"></custom-refresher>
					<view>
						<view class="pt40 pb47 flex flex-direction solid-bottom" v-for="(item, index) in dataList" :key="index">
							<view class="flex align-center justify-between">
								<text class="f28">{{ item.prize_type }}</text>
								<text class="f32 text-bold">{{ item.money }}</text>
							</view>
							<view class="mt42 flex f25 text-gray">{{ item.create_time }}</view>
						</view>
					</view>
				</z-paging>
				<!-- </scroll-view> -->
			</view>
		</view>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			dataList: [],
		};
	},
	onShow() {},
	onLoad(e) {
		// this.myPurse();
	},
	methods: {
		async queryList(pageNo, pageSize) {
			let obj = {
				page: pageNo,
				page_size: pageSize,
			};
			const res = await this.$u.post('Finance/wallet', obj, {});
			if (res.code) {
				this.data = res.data;
				console.log('res :>> ', res);
				if (Object.keys(res.data.list).length === 0) {
					console.log('111 :>> ', 111);
					return this.$refs.paging.complete([]);
				}
				console.log('2222 :>> ', 2222);
				return this.$refs.paging.complete(res.data.list);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
/deep/ .u-navbar,
.u-navbar-fixed {
	// position: fixed;
	// top: 0;
	// transform: translateX(-50%);
	// z-index: 99999;
	background: transparent !important;
}
/deep/ .u-navbar-placeholder {
	height: 0 !important;
}
.page_box {
	.content_box {
		.head-bg {
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210615204858.png);
		}
		.info {
			background: #ffffff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin-top: -20rpx;
			/deep/.tred {
				position: absolute;
				bottom: 0;
				left: 0;
				display: inline-flex;
				z-index: 99;
			}
			.tred::after {
				content: ' ';
				width: 68rpx;
				height: 12rpx;
				background: #fbb9b5;

				border-radius: 6rpx;
				position: absolute;
				bottom: -5rpx;
				left: 0;
				// transform: translateX(50%);
				z-index: -1;
			}
		}
	}
}
</style>
